// @日期：2018年9月8日
// @描述：用来显示用户相关信息的通用组件
//       使用需要引入personalInfo.css
function PersonalInfo() {

    this.initFramwork = function (containerDivId) {
        // @参数：containerDivId（用来盛放该组建的外层div id）
        // @类方法：创建显示框架
        var containerDiv = document.getElementById(containerDivId); //获取congtainer主体

        var backDiv = document.createElement("div");
        backDiv.setAttribute("class","personal-background");

        var mainDiv = document.createElement("div"); //创建存放信息的div
        mainDiv.setAttribute("class", "personal-info");


        var mainDivImgDiv = document.createElement("div"); //创建存放个人头像的div
        mainDivImgDiv.setAttribute("class", "personal-picture-container")
        var mainDivImg = document.createElement("img");
        mainDivImg.setAttribute("class", "personal-picture");
        mainDivImg.setAttribute("src", "../../img/user/headimg.JPG");
        mainDivImgDiv.appendChild(mainDivImg);
        mainDiv.appendChild(mainDivImgDiv);

        var mainDivInfoBig = document.createElement("p"); //创建展示个人信息
        mainDivInfoBig.setAttribute("class", "personal-info-general")
        mainDivInfoBig.innerText = "用户伍六柒";
        var mainDivInfoSmall = document.createElement("small");
        mainDivInfoSmall.setAttribute("class", "personal-info-general-rank")
        mainDivInfoSmall.innerText = "白金用户";
        mainDiv.appendChild(mainDivInfoBig);
        mainDiv.appendChild(mainDivInfoSmall);

        var mainDivInfoDetail = document.createElement("div");//创建详细信息
        mainDivInfoDetail.setAttribute("class", "layui-row personal-info-detail");
        var mainDivInfoDetail1 = document.createElement("div");
        mainDivInfoDetail1.setAttribute("class", "layui-col-md4");
        var mainDivInfoDetail1A = document.createElement("a");
        mainDivInfoDetail1A.innerText = "兑换券";
        mainDivInfoDetail1.appendChild(mainDivInfoDetail1A);
        mainDivInfoDetail.appendChild(mainDivInfoDetail1);
        var mainDivInfoDetail2 = document.createElement("div");
        mainDivInfoDetail2.setAttribute("class", "layui-col-md4");
        var mainDivInfoDetail2A = document.createElement("a");
        mainDivInfoDetail2A.innerText = "兑换记录";
        mainDivInfoDetail2.appendChild(mainDivInfoDetail2A);
        mainDivInfoDetail.appendChild(mainDivInfoDetail2);
        var mainDivInfoDetail3 = document.createElement("div");
        mainDivInfoDetail3.setAttribute("class", "layui-col-md4");
        var mainDivInfoDetail3A = document.createElement("a");
        mainDivInfoDetail3A.innerText = "消息";
        mainDivInfoDetail3.appendChild(mainDivInfoDetail3A);
        mainDivInfoDetail.appendChild(mainDivInfoDetail3);
        mainDiv.appendChild(mainDivInfoDetail);

        var mainDivInfoSetting = document.createElement("div");//创建设置退出栏
        mainDivInfoSetting.setAttribute("class","layui-row personal-info-setting");
        var mainDivInfoSetChange = document.createElement("button");
        mainDivInfoSetChange.setAttribute("class","layui-btn");
        mainDivInfoSetChange.innerText="设置";
        var mainDivInfoLogOut = document.createElement("button");
        mainDivInfoLogOut.setAttribute("class","layui-btn layui-btn-danger");
        mainDivInfoLogOut.innerText="登出";
        mainDivInfoSetting.appendChild(mainDivInfoSetChange);
        mainDivInfoSetting.appendChild(mainDivInfoLogOut);
        mainDiv.appendChild(mainDivInfoSetting);


        backDiv.appendChild(mainDiv)
        containerDiv.appendChild(backDiv);
    }
}